<template>
   <div class="iframe-cont">
       <div class="content">
           <el-page-header @back="$router.go(-1)" :content="$route.meta.title">
           </el-page-header>
<!--           分割线-->
           <el-divider></el-divider>
           <div class="group">
               <el-descriptions :column="4" >
                   <el-descriptions-item label="订单号">{{info.recordCode}}</el-descriptions-item>
                   <el-descriptions-item label="用户名">{{info.userName}}</el-descriptions-item>
                   <el-descriptions-item label="加注量（kg）">{{info.recordNum}}</el-descriptions-item>
                   <el-descriptions-item label="实际加注量（kg）">{{info.actualWeight}}</el-descriptions-item>
                   <el-descriptions-item label="尿素单价（元）">{{info.moneyPrice}}</el-descriptions-item>
                   <el-descriptions-item label="加注金额（元）">{{info.moneyAmount}}</el-descriptions-item>
                   <el-descriptions-item label="实际加注金额（元）">{{info.moneyFill}}</el-descriptions-item>
                   <el-descriptions-item label="设备名称">{{info.macName}}</el-descriptions-item>
                   <el-descriptions-item label="设备编号">{{info.macCode}}</el-descriptions-item>
               </el-descriptions>
           </div>
           <div class="group">
               <el-descriptions title="时间" :column="4" >
                   <el-descriptions-item label="开始时间">{{info.addTime}}</el-descriptions-item>
                   <el-descriptions-item label="结束时间">{{info.finishTime}}</el-descriptions-item>
                   <el-descriptions-item label="命令发送时间">{{info.fillTime}}</el-descriptions-item>
                   <el-descriptions-item label="命令发送状态">
                       <span v-if="info.cmdStatus===1" style="color: #55a532">成功</span>
                       <span v-else-if="info.cmdStatus===2" style="color: red;">失败</span>
                       <span v-else>未发送</span>
                   </el-descriptions-item>
               </el-descriptions>
           </div>
           <div class="group">
               <el-descriptions title="支付" :column="4" >
                   <el-descriptions-item label="支付方式">{{info.payTypeName}}</el-descriptions-item>
                   <el-descriptions-item label="支付金额（元）">{{info.moneyPay}}</el-descriptions-item>
                   <el-descriptions-item label="支付单号">{{info.payCode}}</el-descriptions-item>
                   <el-descriptions-item label="优惠金额">{{info.moneyDiscount}}</el-descriptions-item>
                   <el-descriptions-item label="卡备注">{{info.cardDesc}}</el-descriptions-item>
               </el-descriptions>
           </div>
           <div class="group">
               <el-descriptions title="退款" :column="4" >
                   <el-descriptions-item label="退款单号">{{info.refundCode}}</el-descriptions-item>
                   <el-descriptions-item label="退款时间">{{info.refundTime}}</el-descriptions-item>
                   <el-descriptions-item label="已退款金额（元）">{{info.moneyReturn}}</el-descriptions-item>
                   <el-descriptions-item label="应退款金额（元）">
                       <span style="margin-right: 10px;">{{ realRefund }}</span>
                       <el-button v-if="info.moneyReturn==0 && realRefund > 0 && info.returnStatus===0"
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="pop = true"
                       >退款</el-button>
                   </el-descriptions-item>
               </el-descriptions>
           </div>

       </div>
       <!--退款弹窗-->
       <el-dialog
           :append-to-body="true"
           title="退款"
           :visible.sync="pop"
           width="30%"
       >
            <div class="pop">
                <div class="pop-one f">
                    <div class="name">加注金额(元)</div>
                    <div class="popvalue"> {{info.moneyPay }} </div>
                </div>
                <div class="pop-one f">
                   <div class="name">实际加注金额(元)</div>
                   <div class="popvalue"> {{info.moneyFill}} </div>
                </div>
                <div class="pop-one f">
                   <div class="name">退款金额(元)</div>
                   <div class="popvalue"> {{realRefund}} </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="pop = false">取 消</el-button>
                <el-button type="primary" @click="refund">确 定</el-button>
            </span>
       </el-dialog>
   </div>
</template>

<script>
    import {getUnusualRecordDetail} from "@/api/fill";
    import {Message} from "element-ui";
    import {BigNumber} from 'bignumber.js'

    export default {
        data(){
            return{
                pop: false, //退款弹窗控制字段
                info: {},   //接收数据
            }
        },
        computed: {
            realRefund() {
                const x = new BigNumber(this.info.moneyPay);
                let delta = x.minus(this.info.moneyFill).toNumber()
                return delta > 0 ? delta : 0
            }
        },
        created() {
            if(this.$route.query.id) {
                this.getDetail()
            }
        },
        methods:{
            refund() {
                this.$http({
                    url: '/macManage/returnMoney',
                    data: {
                        returnMoney: '',
                        recordCode: this.info.recordCode
                    }
                }).then(res => {
                    Message.success('退款成功')
                    this.pop = false
                })
            },
            getDetail() {
                getUnusualRecordDetail(this.$route.query.id).then((res)=>{
                    this.info = res.data;
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .group{
        margin-top: 20px;
        padding-left: 40px;
        .title{
            color: rgba(16, 16, 16, 100);
            font-size: 18px;
            font-weight: bold;
        }
        .group-two{
            flex-shrink: 0;
            margin-top: 30px;
            width: 300px;
            .name{
                color: rgba(102, 102, 102, 100);
                font-size: 12px;
                flex-shrink: 0;
            }
            .message{
                flex-shrink: 0;
                color: rgba(51, 51, 51, 100);
                font-size: 12px;
                font-weight: bold;
            }
            .el-button{
                margin-left: 20px;
            }
        }
    }
    .pop{
        .pop-one{
            margin-top: 20px;
            .name{
                flex: 1;
                text-align: right;
                margin-right: 20px;
            }
            .popvalue{
                flex:1;
            }
        }
    }
</style>
